<!DOCTYPE html>
<html lang="en-us">
  <head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.1/styles/github.min.css" />
     <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/diff2html/bundles/css/diff2html.min.css" />
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/diff2html/bundles/js/diff2html-ui.min.js"></script>
  </head>
  <script>
    const diffString = `
--- 原始文件
+++ 对比文件
@@ -1,1 +1,0 @@
-1
 规则名称：r1
 是否开启：true
 激活分组：g1
 备注描述：null
 条件：
@@ -7,1 +6,1 @@
-  ( 名称 不等于 "jack" 并且 integer 小于 2 )
+  ( 名称 等于 "jack" 并且 integer 小于 2 )
   并且 cesu 小于 10
 结果：
   name = "123"
   name = getCode()
   integer = 200
@@ -13,1 +12,1 @@
-;
+11

`;


     document.addEventListener('DOMContentLoaded', function () {
      var targetElement = document.getElementById('myDiffElement');
      var configuration = {
        drawFileList: true,
        fileListToggle: true,
        fileListStartVisible: true,
        fileContentToggle: true,
        matching: 'lines',
        outputFormat: 'side-by-side',
        synchronisedScroll: true,
        highlight: true,
        renderNothingWhenEmpty: true,
      };
      var diff2htmlUi = new Diff2HtmlUI(targetElement, diffString, configuration);
      diff2htmlUi.draw();
      diff2htmlUi.highlightCode();
    });
  </script>
  <body>
    <div id="myDiffElement"></div>
  </body>
</html>